<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <link rel="stylesheet" href="couldMission.css">
    <link rel="stylesheet" href="../../layui/layui.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_788882_518mhcqmf6g.css">
    <link rel="stylesheet" href="../../index.css">
    <link rel="stylesheet" href="imgupload.css">

    <!-- <link rel="stylesheet" href="personalCenter.css"> -->
</head>

<body class="iframchild">
    <div class="layui-tab layui-tab-card">
        <ul class="layui-tab-title">
            <li class="layui-this">
                <i class="iconfont icon-shebei1"></i>设备方案</li>
            <li>
                <i class="iconfont icon-pengyouquan"></i>发朋友圈</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="common">
                    <div id="box" style="display:inline-block">
                        <input type="text" placeholder="请输入您要搜索的内容" id="input">
                        <div id="search">搜索</div>
                    </div>
                    <div class="cb">
                        <div class="fl">
                            <div class="layui-form" wid100="">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label">活动日期</label>
                                        <div class="layui-input-inline">
                                            <input class="layui-input" id="test-laydate-start" placeholder="开始日期" lay-key="1" type="text">
                                        </div>
                                        <div class="layui-form-mid">
                                            -
                                        </div>
                                        <div class="layui-input-inline">
                                            <input class="layui-input" id="test-laydate-end" placeholder="结束日期" lay-key="2" type="text">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="fl" style="display:inline-block;">
                            <form class="layui-form" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">选择框</label>
                                    <div class="layui-input-block">
                                        <select name="city" lay-verify="required">
                                            <option value=""></option>
                                            <option value="0">北京</option>
                                            <option value="1">上海</option>
                                            <option value="2">广州</option>
                                            <option value="3">深圳</option>
                                            <option value="4">杭州</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="fl" style="display:inline-block;">
                            <form class="layui-form" action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">选择框</label>
                                    <div class="layui-input-block">
                                        <select name="city" lay-verify="required">
                                            <option value=""></option>
                                            <option value="0">北京</option>
                                            <option value="1">上海</option>
                                            <option value="2">广州</option>
                                            <option value="3">深圳</option>
                                            <option value="4">杭州</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <button class="layui-btn fl" style="margin-left: 20px">查询</button>
                        <button class="layui-btn fl" style="margin-left: 20px">下载订单</button>
                    </div>
                    <div class="layui-card-body">
                        <table class="layui-table" lay-even="" lay-skin="row">
                            <colgroup>
                                <col width="150">
                                <col width="150">
                                <col width="200">
                                <col>
                            </colgroup>
                            <thead>
                                <tr>
                                    <th class="tab-5">
                                        编号
                                    </th>
                                    <th class="tab-8">
                                        方案名称
                                    </th>
                                    <th class="tab-38">
                                        设备列表
                                    </th>
                                    <th class="tab-6">
                                        创建时间
                                    </th>
                                    <th class="tab-5">
                                        操作
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        1
                                    </td>
                                    <td>
                                        1
                                    </td>
                                    <td>
                                        一号返利,ssssss,ss
                                    </td>
                                    <td>
                                        2018-8-13 15:10:46
                                    </td>
                                    <td class="td-manage ">
                                        <a title="删除" href="javascript:;" onclick="admin_del(this,38)" style="text-decoration:none" class="x-orange">
                                            删除
                                        </a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div style=" width:800px;margin: 0 auto;position:relative;">
                        <div id="test-laypage-demo2-1">
                            <div class="layui-box layui-laypage layui-laypage-molv" id="layui-laypage-4">
                                <a href="javascript:;" class="layui-laypage-prev layui-disabled" data-page="0">上一页</a>
                                <span class="layui-laypage-curr">
                                    <em class="layui-laypage-em"></em>
                                    <em>1</em>
                                </span>
                                <a href="javascript:;" data-page="2">2</a>
                                <a href="javascript:;" data-page="3">3</a>

                                <a href="javascript:;" data-page="4">4</a>

                                <a href="javascript:;" data-page="5">5</a>
                                <span class="layui-laypage-spr">…</span>

                                <a href="javascript:;" class="layui-laypage-last" title="尾页" data-page="10">10</a>
                                <a href="javascript:;" class="layui-laypage-next" data-page="2">下一页</a>
                            </div>

                        </div>
                        <span style="position:absolute;right:0px;top:15px">共有数据:0条</span>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">图片发圈</li>
                        <li>视频发圈</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item  layui-show">
                            <form id="formImg" class="layui-form " action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">采集内容</label>
                                    <div class="layui-input-block">
                                        <textarea id="productname" name="productname" lay-verify="required" placeholder="请输入相匹配的优惠券和商品，否则可能打不开。不支持淘宝外部短链接。" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item" style="display: none">
                                    <label class="layui-form-label">商品id</label>
                                    <div class="layui-input-block">
                                        <textarea id="productId" name="productId" placeholder="商品id" readonly="readonly" class="layui-input"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">朋友圈标题</label>
                                    <div class="layui-input-block">
                                        <textarea id="title" name="title" placeholder="请输入朋友圈标题" lay-verify="required" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">发送时间</label>
                                    <div class="layui-input-block">
                                        <!-- <input type="text" name="sendTime" lay-verify="required" id="sendTime" autocomplete="off" class="layui-input"> -->
                                        <input type="text" id="test5" required="" name="sendTime" placeholder="不填默认现在发送" autocomplete="off" class="layui-input" lay-key="1">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="phone" class="layui-form-label">
                                        设备方案
                                    </label>
                                    <div class="layui-input-inline">
                                        <select name="snsPlanId" id="snsPlanId">
                                            <option value="">请选择设备方案</option>
                                            <option value="449">排除新返利-淘宝查券</option>
                                            <option value="455">eco淘宝查券</option>
                                        </select>
                                        <div class="layui-unselect layui-form-select">
                                            <div class="layui-select-title">
                                                <input type="text" placeholder="请选择设备方案" value="" readonly="" class="layui-input layui-unselect">
                                                <i class="layui-edge"></i>
                                            </div>
                                            <dl class="layui-anim layui-anim-upbit">
                                                <dd lay-value="" class="layui-select-tips">请选择设备方案</dd>
                                                <dd lay-value="449" class="">排除新返利-淘宝查券</dd>
                                                <dd lay-value="455" class="">eco淘宝查券</dd>
                                            </dl>
                                        </div>
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">
                                        不选择默认发送所有设备
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label ">分批推送</label>
                                    <div class="layui-input-inline">
                                        <input type="number" name="pushtime" placeholder="请输入" lay-verify="required|number" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">(设备与设备之间的间隔单位(秒))</div>
                                </div>

                                <div class="layui-form-item">
                                    <label class="layui-form-label">朋友圈图片</label>
                                    <div class="layui-input-block s-input">
                                        <!-- <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入朋友圈标题" class="layui-input"> -->
                                        <div>
                                            <div id="sel_img">选择图片</div>
                                        </div>
                                        <span>(支持多选,至少选一张图片)</span>
                                        <ul id="fileList" class="connectedSortable"></ul>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">评论内容
                                        <a onclick="addFormText()">
                                            <i class="layui-icon" style="margin-left: 20px"></i>添加更多评论
                                        </a>
                                    </label>
                                    <div class="layui-input-block" id="watextarea">
                                        <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                                        <!-- <div>
                                                    <a onclick="deletediv(this)">删除</a>
                                                    <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                                                </div> -->
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn" type="button" lay-submit="" id="addBtn1" lay-filter="demo2">发送</button>
                                </div>
                            </form>
                        </div>

                        <div class="layui-tab-item">
                            <form id="formVideo" class="layui-form " action="">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">采集内容</label>
                                    <div class="layui-input-block">
                                        <textarea id="productname" name="productname" placeholder="请输入相匹配的优惠券和商品，否则可能打不开。不支持淘宝外部短链接。" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item" style="display: none">
                                    <label class="layui-form-label">商品id</label>
                                    <div class="layui-input-block">
                                        <textarea id="productId" name="productId" placeholder="商品id" readonly="readonly" class="layui-input"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">朋友圈标题</label>
                                    <div class="layui-input-block">
                                        <textarea id="title" name="title" placeholder="请输入朋友圈标题" lay-verify="required" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">发送时间</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="test5" required="" name="sendTime" placeholder="不填默认现在发送" autocomplete="off" class="layui-input" lay-key="1">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label for="phone" class="layui-form-label">
                                        设备方案
                                    </label>
                                    <div class="layui-input-inline">
                                        <select name="snsPlanId" id="snsPlanId">
                                            <option value="">请选择设备方案</option>
                                            <option value="449">排除新返利-淘宝查券</option>
                                            <option value="455">eco淘宝查券</option>
                                        </select>
                                     
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">
                                        不选择默认发送所有设备
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label ">分批推送</label>
                                    <div class="layui-input-inline">
                                        <input type="number" name="pushtime" lay-verify="required|number" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">(设备与设备之间的间隔单位(秒))</div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">朋友圈视频</label>
                                    <div class="layui-input-block s-input">
                                        <div>
                                            <div id="sel_video">选择视频</div>
                                        </div>
                                        <span>(支持多选,至少选一个视频)</span>
                                        <ul id="fileListVideo" class="connectedSortableVideo"></ul>
                                    </div>
                                </div>
                                <div class="layui-form-item layui-form-text">
                                    <label class="layui-form-label">评论内容
                                        <a onclick="addFormText2()">
                                            <i class="layui-icon" style="margin-left: 20px"></i>添加更多评论
                                        </a>
                                    </label>
                                    <div class="layui-input-block" id="watextarea2">
                                        <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <button class="layui-btn" type="button" lay-submit="" id="addBtn2" lay-filter="demo2">发送</button>
                                </div>
                            </form>
                        </div>
                    </div>


                </div>
            </div>



        </div>
    </div>
    </div>
    <script type="text/javascript" src="../../layui/layui.all.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="webuploader.js"></script>
    <script src="jquery-ui.js"></script>
    <script src="../../index.js"></script>
    <script>
        var element = layui.element;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var laypage = layui.laypage;
        laydate.render({
            elem: '#test-laydate-start' //指定元素
        });
        laydate.render({
            elem: '#test-laydate-end' //指定元素
        });
        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
                ,
            count: 50 //数据总数，从服务端得到
        });
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form,
                layer = layui.layer,
                layedit = layui.layedit,
                laydate = layui.laydate;

            //日期
            laydate.render({
                elem: '#test5',
                type: 'datetime'
            });
            $(function () {
                // uploader.refresh();
            });
        });
        layui.use('element', function () {
            var element = layui.element;
        });

        function IsURL(str_url) {
            var strRegex = "^((https|http|ftp|rtsp|mms)?://)" +
                "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" //ftp的user@
                +
                "(([0-9]{1,3}\.){3}[0-9]{1,3}" // IP形式的URL- 199.194.52.184
                +
                "|" // 允许IP和DOMAIN（域名）
                +
                "([0-9a-z_!~*'()-]+\.)*" // 域名- www.
                +
                "([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\." // 二级域名
                +
                "[a-z]{2,6})" // first level domain- .com or .museum
                +
                "(:[0-9]{1,4})?" // 端口- :80
                +
                "((/?)|" // a slash isn't required if there is no file name
                +
                "(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
            var re = new RegExp(strRegex);
            //re.test()
            if (re.test(str_url)) {
                return (true);
            } else {
                return (false);
            }
        }
        $("#addBtn1").click(function () {
            var proName = $('#formImg #productname').val()
            var title = $('#formImg #title').val()
            var sendTime = $('#formImg #text5').val()
            var snsPlanId = $('#formImg #snsPlanId option:selected').val()
            var pushtime = $('#formImg input[name="pushtime"]').val()
            var imgArr = []
            var review = [];
            for (var i = 0; i < $('#formImg #watextarea textarea').length; i++) {
                review.push($('#formImg #watextarea textarea').eq(i).val())
            }
            for (var i = 0; i < $('#formImg #fileList li').length; i++) {
                imgArr.push($('#formImg #fileList li').eq(i).children('img').attr('src'))
            }
            if (imgArr.length < 1) {
                layer.msg("请上传图片");
            } else {
                var vData = {
                    "proName": proName,
                    "title": title,
                    "sendTime": sendTime,
                    "snsPlanId": snsPlanId,
                    "pushtime": pushtime,
                    "imgArr": imgArr,
                    "review": review
                }

                $.ajax({
                    url: "/mobile/home/addBanner",
                    type: 'post',
                    traditional: true,
                    data: vData,
                    success: function (obj) {
                        console.log(obj)
                        if (obj.status == 200) {
                            layer.msg("添加成功")
                            window.parent.location.reload();
                            var index = parent.layer.getFrameIndex(Window.name)
                            parent.layer.close(index);
                        } else {
                            console.log(obj);
                            layer.msg(obj.msg);
                        }

                    }
                });
            }
        })
        $("#cancel").click(function () {
            window.parent.location.reload();
            var index = parent.layer.getFrameIndex(Window.name)
            parent.layer.close(index);
        })

        $("#addBtn2").click(function () {
            var proName = $('#formVideo #productname').val()
            var title = $('#formVideo #title').val()
            var sendTime = $('#formVideo #text5').val()
            var snsPlanId = $('#formVideo #snsPlanId option:selected').val()
            var pushtime = $('#formVideo input[name="pushtime"]').val()
            var imgArr = []
            var review = [];
            for (var i = 0; i < $('#formVideo #watextarea textarea').length; i++) {
                review.push($('#formVideo #watextarea textarea').eq(i).val())
            }
            for (var i = 0; i < $('#formVideo #fileList li').length; i++) {
                imgArr.push($('#formVideo #fileList li').eq(i).children('img').attr('src'))
            }
            if (imgArr.length < 1) {
                layer.msg("请上传图片");
            } else {
                var vData = {
                    "proName": proName,
                    "title": title,
                    "sendTime": sendTime,
                    "snsPlanId": snsPlanId,
                    "pushtime": pushtime,
                    "imgArr": imgArr,
                    "review": review
                }

                $.ajax({
                    url: "/mobile/home/addBanner",
                    type: 'post',
                    traditional: true,
                    data: vData,
                    success: function (obj) {
                        console.log(obj)
                        if (obj.status == 200) {
                            layer.msg("添加成功")
                            window.parent.location.reload();
                            var index = parent.layer.getFrameIndex(Window.name)
                            parent.layer.close(index);
                        } else {
                            console.log(obj);
                            layer.msg(obj.msg);
                        }

                    }
                });
            }
        })

        // 添加评论
        function addFormText() {
            var addText =
                '<div class="more-add"><a onclick="deletediv(this)">删除</a><textarea placeholder="请输入内容" class="layui-textarea"></textarea></div>';
            $('#watextarea').append(addText)
        }

        function addFormText2() {
            var addText =
                '<div class="more-add"><a onclick="deletediv(this)">删除</a><textarea placeholder="请输入内容" class="layui-textarea"></textarea></div>';
            $('#watextarea2').append(addText)
        }

        // 删除评论
        function deletediv(obj) {
            /*
                1.找到父级元素，删除节点
            */
            console.log(obj)
            // e.parent().remove()
            // var thisObj = $(a)
            $(obj).parent().remove()
        }

        /* 图片上传-start */
        var uploader = WebUploader.create({
            auto: true,
            swf: 'https://qiniu-plupload.qiniudn.com/path/of/plupload/Moxie.swf',
            server: 'https://up.qiniu.com',
            pick: {
                id: '#sel_img',
                multiple: true
            },
            formData: {
                token: '${token}'
            },
            accept: {
                title: 'Images',
                extensions: 'jpg,jpeg,bmp,png,gif',
                mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif,image/bmp'
            }
        });
        var site = "https://p9u73ikhj.bkt.clouddn.com"
        var n = 0;
        uploader.on('fileQueued', function (file) {
            // if(n==1){
            //     return
            // }n=n+1;
            var l = $('<li  id="' + file.id + '" style="position:relative">' + '<img>' +
                '<div class="del"><span>+</span></div>' + '</li>');
            var i = l.find('img');
            $("#fileList").append(l);
            if ($("#fileList").html() !== '') {
                $("#fileList").css({
                    border: '1px solid #e2e2e2',
                    padding: '10px'
                })
            }
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    i.replaceWith('<span>不能预览</span>');
                    return
                }
                i.attr('src', src)
            }, 100, 100)
        });

        uploader.on('uploadProgress', function (file, percentage) {
            var l = $('#' + file.id),
                p = l.find('.progress span');
            if (!p.length) {
                p = $('<p class="progress"><span></span></p>').appendTo(l).find('span')
            }
            p.css('width', percentage * 100 + '%')
        });
        uploader.on('uploadSuccess', function (file, response) {
            $('#' + file.id).addClass('upload-state-done');
            var sourceLink = site + "/" + response.key;
            $('#' + file.id).attr('src', sourceLink)
        });
        uploader.on('uploadError', function (file) {

        });
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove()
        });

        $(function () {
            $("#fileList").sortable().disableSelection();
            var $tabs = $("#tabs").tabs();
            var $tab_items = $("#imgBox ul:first li", $tabs).droppable({
                accept: ".connectedSortable li",
                hoverClass: "ui-state-hover",
                drop: function (event, ui) {
                    var $item = $(this);
                    var $list = $($item.find("a").attr("href"))
                        .find(".connectedSortable");
                }
            });
        });
        $(document).on('click', '.del', function () {
            n = n - 1;
            $(this).parent().remove();
            if ($("#fileList").html() == '') {
                $("#fileList").css({
                    border: 'none',
                    padding: 0
                })
            }
        })

        /* 图片上传-end */

        /* 视频上传-start */
        var uploaderVideo = WebUploader.create({
            auto: true,
            swf: 'https://qiniu-plupload.qiniudn.com/path/of/plupload/Moxie.swf',
            server: 'https://up.qiniu.com',
            pick: {
                id: '#sel_video',
                multiple: true
            },
            formData: {
                token: '${token}'
            },
            accept: {
                title: 'Videos',
                extensions: 'mp4,flv,avi',
                mimeTypes: 'video/mp4,video/flv,video/avi'
            }
        });
        var site = "https://p9u73ikhj.bkt.clouddn.com"
        var n = 0;
        uploaderVideo.on('fileQueued', function (file) {
            console.log('文件上传')
            // if(n==1){
            //     return
            // }n=n+1;
            var l = $('<li  id="' + file.id + '" style="position:relative">' + '<img>' +
                '<div class="del"><span>+</span></div>' + '</li>');
            var i = l.find('img');
            $("#fileList").append(l);
            if ($("#fileList").html() !== '') {
                $("#fileList").css({
                    border: '1px solid #e2e2e2',
                    padding: '10px'
                })
            }
            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    i.replaceWith('<span>不能预览</span>');
                    return
                }
                i.attr('src', src)
            }, 100, 100)
        });

        uploaderVideo.on('uploadProgress', function (file, percentage) {
            console.log('文件上传中')
            var l = $('#' + file.id),
                p = l.find('.progress span');
            if (!p.length) {
                p = $('<p class="progress"><span></span></p>').appendTo(l).find('span')
            }
            p.css('width', percentage * 100 + '%')
        });
        uploaderVideo.on('uploadSuccess', function (file, response) {
            console.log('文件上传成功')
            $('#' + file.id).addClass('upload-state-done');
            var sourceLink = site + "/" + response.key;
            $('#' + file.id).attr('src', sourceLink)
        });
        uploaderVideo.on('uploadError', function (file) {
            console.log('文件上传错误')
        });
        uploaderVideo.on('uploadComplete', function (file) {
            console.log(file)
            $('#' + file.id).find('.progress').remove()
        });

        $(function () {
            $("#fileListVideo").sortable().disableSelection();
            var $tabs = $("#tabs").tabs();
            var $tab_items = $("#imgBox ul:first li", $tabs).droppable({
                accept: ".connectedSortableVideo li",
                hoverClass: "ui-state-hover",
                drop: function (event, ui) {
                    var $item = $(this);
                    var $list = $($item.find("a").attr("href"))
                        .find(".connectedSortableVideo");
                }
            });
        });
        $(document).on('click', '.del', function () {
            n = n - 1;
            $(this).parent().remove();
            if ($("#fileList").html() == '') {
                $("#fileList").css({
                    border: 'none',
                    padding: 0
                })
            }
        })
    </script>

</body>

</html>